<!--  -->
<template>
  <div class="customized_selcet">
    <div class="label_intro">{{ scriptItem.intro}}</div>
    <el-select v-model="dataForm[scriptItem.text]"
               filterable
               :clearable='scriptItem.hideClearBtn ? false : true'
               style="width: 280px;"
               @change="customiChange"
               :placeholder="scriptItem.hint"
               default-first-option>
      <el-option v-for="its in scriptItem.selectList"
                 :key="its.value"
                 :label="its.label"
                 :value="its.value">
                 <img v-if="its.img" :src="its.img" style="width:20px;margin-right:10px">
                 <label class="point_back" :style="{backgroundColor:its.point}" v-if="its.point"></label>
                 {{its.label}}
                 </el-option>
    </el-select>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
    }
  },
  created () {
    if (!this.dataForm[this.scriptItem.text]) {
      this.dataForm[this.scriptItem.text] = this.scriptItem.defaultValue
    }
  },
  methods: {
    customiChange (e) {
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
.customized_selcet {
  .label_intro {
    width: 355px;
    font-size: 14px;
    font-weight: 400;
    color: #7f7f7f;
    line-height: 20px;
    margin-bottom: 10px;
  }
}
.point_back{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
